<template>
    <div class="foucs">
        <div class="sort">
            <ul>
                
                <router-link to="/comment">
                    <li><a href="###" class="iconfont">&#xe6bc;评论</a></li>
                </router-link>
                
                <router-link to="/click">
                    <li><a href="###" class="iconfont">&#xe677;喜欢</a></li>
                </router-link>
                
                <router-link to="/focus">
                    <li  class="active"><a href="###" class="iconfont active">&#xe63f;粉丝</a> <i style="color:#26a2ff;font-size:1rem;" v-if="!this.login">{{this.length}}</i></li>
                </router-link>
                
                <router-link to="/letter">
                    <li><a href="###" class="iconfont">&#xe637;私信</a></li>
                </router-link>
                
            </ul>
        </div>

        <div class="login" v-show="login">
            <a href="/#/login">还未登录，请先登录！</a>
        </div>

        <div class="main" v-show="main">
          <p class="title">
            <span>总数：<i>{{this.list.length}}</i></span>
            
            <span>未读：<i class="havenot">{{this.hasnot.length}}</i></span>
            <span class="onebutt" @click="one()"><a href="###">一键已读</a></span>
          </p>
          <ul>
            <li v-for="(item,index) in list" :key="item.index" @mouseenter="showdel(index)" @mouseleave="notshow(index)">
              <router-link :to='"/userdetails/" + item.user.id'>
              <img class="img" :src="item.user.photo" alt="" v-if="item.user.photo">
              <img class="img" src="../../../../.././../static/imgs/fans.jpg" alt="" v-if="!item.user.photo">
              </router-link>
              <div class="comcontent">
                  <router-link :to='"/userdetails/" + item.user.id'>
                  <p><a href="###">{{item.user.name}}</a> <i>{{item.attention.time.slice(0,10)}}</i></p>
                  </router-link>
                  <div>关注了你</div>
              </div>
              <span class="iconfont span"><a href="###" title="关注" @click="focus()" ref="focus">&#xe667;</a></span>
              
              <i class="delete" v-show="show[index]"><a href="###" class="iconfont" @click="del(index)" title="删除">&#xe68f;</a></i>
              <span class="read" v-show="!read[index]" @click="isread(index)"><a href="###">未读</a></span>
              <span class="hasread" v-show="read[index]" @click="isread(index)"><a href="###">已读</a></span>
            </li>
          </ul>
      </div>

      <p class="page">
        <span><a href="###" class="iconfont" title="上一页" @click="last()">&#xe634;</a></span>
        <span><i>{{page}}</i></span>
        <span><a href="###" class="iconfont" title="下一页" @click="next()">&#xe666;</a></span>
      </p>

      <div class="recommend">
          <p class="p">推荐关注</p>
          <ul>
              <li v-for="item in user" :key="item.index">
                  <router-link :to='"/userdetails/" + item.id'>
                  <img :src="item.photo" alt="" v-if="item.photo">
                  <img class="img" src="../../../../.././../static/imgs/fans.jpg" alt="" v-if="!item.photo">
                  <p><a href="###">{{item.name}}</a></p>
                  </router-link>
              </li>

          </ul>
      </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
export default {
    name: 'focus',
    data () {
        return {
            show: true,
            login: true,
            main: false,
            list: [],
            user: [],
            read: [],
            hasnot: [],
            show: [],
            length: '',
            page: 1,
        }
    },

    methods: {
      last () {
        if(this.page > 1) {
          this.length -= this.list.length
          this.page --
          let postData = qs.stringify({
            page: this.page,
          })

          axios.post(`/api/fanNotice`, postData,{headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
                this.list = response.data
                this.read = []
                for (var i = 0; i < this.list.length; i++) {
                  this.read.push(this.list[i].attention.isread)
                 
                  if (this.read[i] == 0) {
                    this.hasnot.push(this.read[i])
                  }
                }
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是第一页了！"
          })
        }

      },

      next () {
        if (this.list.length == 5) {
          this.page ++
          let postData = qs.stringify({
            page: this.page,
          })

          axios.post(`/api/fanNotice`, postData,{headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
                this.list = response.data
                this.length += this.list.length
                this.read = []
                for (var i = 0; i < this.list.length; i++) {
                  this.read.push(this.list[i].attention.isread)
                  
                  if (this.read[i] == 0) {
                    this.hasnot.push(this.read[i])
                  }
                }
            } 

          })
        }
        else {
          this.$message({
            type: 'warn',
            message: "当前已经是最后一页了！"
          })
        }
      },

      focus () {
          if (this.show) {
              this.$refs.focus.innerHTML = ("&#xe635;")
              this.$refs.focus.title = "互相关注"
              this.show = !this.show
          }else {
              this.$refs.focus.innerHTML = ("&#xe667;")
              this.$refs.focus.title = "关注"
              this.show = !this.show
          }
      },

      isread (index) {
        if(this.read[index] == false) {
          this.read[index] = !this.read[index]
          let newItem = this.read[index]
          Vue.set(this.read, index, newItem)

          for (var i = 0; i < this.read.length; i++) {
          
            if (this.read[i] == 0) {
              this.hasnot.push(this.read[i])
            }
          }

          let postData = qs.stringify({
            id: this.list[index].attention.id,
          })

          axios.post(`/api/setReadFan`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

            if (response.status === 200) {
              console.log(response.data)
              
            } 

        })
        }

      },

      one () {
        for (var i = 0; i < this.read.length; i++) {
          if(this.read[i] == false) {
            this.hasnot = []
            this.read[i] = !this.read[i]
            let newItem = this.read[i]
            Vue.set(this.read, i, newItem)

            if (this.read[i] == 0) {
              this.hasnot.push(this.read[i])
            }

            let postData = qs.stringify({
              id: this.list[i].attention.id,
            })

            axios.post(`/api/setReadFan`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                console.log(response.data)
              }
            })

          }
        }
      },

      showdel (index) {
        this.show[index] = true
        let newItem = this.show[index]
        Vue.set(this.show, index, newItem)
      },

      notshow (index) {
        this.show[index] = false
        let newItem = this.show[index]
        Vue.set(this.show, index, newItem)
      },

      del (index) {
        let postData = qs.stringify({
          id: this.list[index].attention.id,
        })

        axios.post(`/api/noShowFan`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            
            let postData = qs.stringify({
              page: 1,
            })

            axios.post(`/api/fanNotice`, postData,{headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

              if (response.status === 200) {
                  this.list = response.data
                  // console.log(this.list)
                  this.length = this.list.length
                  this.read = []
                  this.hasnot = []
                  for (var i = 0; i < this.list.length; i++) {
                    this.read.push(this.list[i].attention.isread)
                    if (this.read[i] == 0) {
                      this.hasnot.push(this.read[i])
                    }

                    this.show.push(false)
                  }
              } 

            })

          }
        })
      },
        
    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.main = true
            this.login = false
          }
        } 

      })

      let postData = qs.stringify({
        page: 1,
      })

      axios.post(`/api/fanNotice`, postData,{headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
            this.list = response.data
            console.log(this.list)
            this.length = this.list.length
            this.read = []
            for (var i = 0; i < this.list.length; i++) {
              this.read.push(this.list[i].attention.isread)
              if (this.read[i] == 0) {
                this.hasnot.push(this.read[i])
              }

              this.show.push(false)
            }
        } 

      })

      axios.post(`/api/goodUsers`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          var userlist = response.data
          for (var i = 0;i < 5; i++) {
            this.user.push(userlist[i])
          }
        } 

      })

    }
}
</script>

<style lang="stylus" scoped>
.foucs
  width 100%
  height auto
  margin-top 5.5rem
  position relative
  //background-color skyblue
  .login
    width 60%
    line-height 37rem
    left 20%
    top 0rem
    margin-bottom 2rem
    text-align center
    font-size 1rem
    position absolute
    background-color #fff
    a
      color red
    a:hover
      color #26a2ff  
  .sort
    width 16%
    height auto
    margin-bottom 2rem
    padding-bottom 2rem
    margin-left 1%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      width 100%
      height auto
      padding-bottom 2rem
      //background-color red
      li 
        width 100%
        line-height 5rem
        margin-top 3rem
        text-align center
        // background-color skyblue
      li:hover
        background-color #eee
    .active
        background-color #eee
        color #26a2ff
  .main
    width 60%
    min-height 37rem
    left 20%
    top 0rem
    position absolute
    background-color #fff
    .title
      line-height 4rem
      text-indent 4rem
      font-size .9rem
      border-bottom 1px #ccc solid
      box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
      // background-color red
      span 
        margin-right 10%
        i 
          color #26a2ff
        .havenot
          color red
      .onebutt
        border .05rem #ccc solid 
        margin-left 44%
        margin-right 0rem
        border-radius 10px
        padding .2rem .1rem
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        a
          color #26a2ff
      .onebutt:hover
        background-color skyblue
        a
          color #fff
    ul
      width 100%
      height auto
      padding-bottom 1rem
      li
        width 90%
        line-height 5rem
        margin-top 1rem
        margin-left 5%
        position relative
        border .05rem #eee solid
        border-radius 10px
        box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
        background-color #fff
        // background-color red
        .img 
          height 3.5rem
          width 7%
          border-radius 50%
          margin-left 4%
        .comcontent
          width 55%
          height 4.5rem
          top .5rem
          left 15%
          position absolute
          padding-top .5rem
          // background-color skyblue 
          p
            line-height 1.5rem
            margin-top .5rem
            // background-color red
            a
              font-size .8rem
              color #26a2ff
            i
              color #aaa
              font-size .7rem
          div
            width 76%
            line-height 1.5rem
            display -webkit-box
            word-break break-all
            -webkit-box-orient vertical
            -webkit-line-clamp 2
            overflow hidden
            text-overflow ellipsis
            // background-color red
        .span 
          width 20%
          margin-left 65%
          font-size 1.7rem
        .delete
          position absolute 
          right 14%
          font-weight 700
        .read
          position absolute
          left 90%
          top 1.5rem
          padding 0rem .5rem
          line-height 2rem
          color red
          border-radius .5rem
          border .05rem  solid
          background-color #fff
          a
            color red
        .hasread
          position absolute
          left 90%
          top 2rem
          padding 0rem .5rem
          line-height 1.5rem
          color #26a2ff
          border-radius .5rem
          border .05rem  solid
          a
            color #26a2ff
  .recommend
    width 16%
    min-height 38rem
    top 0
    left 82%
    position absolute
    margin-bottom 2rem
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    .p
      width 100%
      margin-top 1rem
      line-height 2rem
      font-size 1rem
      color #26a2ff
      text-align center
      //background-color red
    ul
      width 100%
      height auto
      margin-bottom 2rem
      // background-color red
      li
        width 100%
        margin-top 1rem
        // background-color red
        img
          height 4.5rem
          width 30%
          border-radius 50%
          margin-left 40%
        p
          width 90%
          text-align center
          line-height 1rem
          margin-top .5rem
          margin-left 10%
          // background-color red
  .page 
    width 16%
    left 1%
    line-height 3rem
    bottom 1rem
    position fixed
    z-index 10
    display flex
    border .05rem #ccc solid
    background-color #fff
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    span
      width 10%
      margin-left 15%
      text-align center
      font-size 1.2rem
      background-color #fff
      a
        font-size 2rem
      i
        color #26a2ff
</style>